<!-- wyf 2023-12-15 -->
<template>
  <a-auto-complete
    v-model:value="iptValue"
    :allow-clear="allowClear"
    :autofocus="autofocus"
    :backfill="backfill"
    :default-active-first-option="defaultActiveFirstOption"
    :default-open="defaultOpen"
    :disabled="disabled"
    :dropdown-match-select-width="dropdownMatchSelectWidth"
    :dropdown-menu-style="dropdownMenuStyle"
    :filter-option="filterOption"
    :open="open"
    :options="options"
    :placeholder="placeholder"
  >
    <template v-if="$slots.default" #default>
      <slot name="default" />
    </template>
    <template v-if="$slots.option" #option="{ value, label, arr }">
      <slot :value="value" :label="label" :arr="arr" name="option" />
    </template>
    <template v-if="$slots.placeholder" #placeholder>
      <slot name="placeholder" />
    </template>
    <slot />
  </a-auto-complete>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { AutoComplete } from 'ant-design-vue'
export default defineComponent({
  name: 'ZAutoComplete',
  components: {
    AAutoComplete: AutoComplete
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: undefined
    },
    allowClear: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    backfill: {
      type: Boolean,
      default: false
    },
    defaultActiveFirstOption: {
      type: Boolean,
      default: true
    },
    defaultOpen: {
      type: Boolean,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    dropdownMatchSelectWidth: {
      type: [Boolean, Number],
      default: true
    },
    dropdownMenuStyle: {
      type: Object,
      default: undefined
    },
    filterOption: {
      type: [Boolean, Function],
      default: true
    },
    open: {
      type: Boolean,
      default: undefined
    },
    options: {
      type: Array,
      default: undefined
    },
    placeholder: {
      type: String,
      default: undefined
    }
  },
  setup(props, _ref) {
    const iptValue = computed({
      get() {
        return props.value
      },
      set(val) {
        _ref.emit('update:value', val)
      }
    })
    return {
      iptValue
    }
  }
})
</script>
